import React, { Component, PropTypes } from 'react';
import gql from 'graphql-tag';
import { View, Text, StyleSheet } from 'react-native';
import { ListItem } from 'react-native-elements'

const styles = StyleSheet.create({
  subtitle: {
    color: 'grey'
  },
  subContainer: {
    paddingLeft: 10
  }
})

const OrderHistoryItem = ({history:{details, operatorName, createdAt}}) => (
  <ListItem title={details}
    subtitle={
      <View style={styles.subContainer}>
        <Text style={styles.subtitle}>{operatorName}</Text>
        <Text style={styles.subtitle}>{createdAt}</Text>
      </View>} hideChevron/>
);

OrderHistoryItem.fragments = {
  history: gql`
    fragment OrderHistoryItem on OrderHistory {
      id
      details
      operatorName
      createdAt
    }
  `
}

export default OrderHistoryItem;
